<!--
 * @Description: 首页-头部
 * @FilePath: \hk-computerRoom-Security\src\views\home\component\home-head.vue
 * @Date: 2024-01-15 14:25:43
 * @LastEditTime: 2024-02-02 11:07:20
-->
<template>
	<div class="home-head">
		<div class="home-title">机房安全监测管理系统</div>
		<div class="home-return">
			<div class="return-btn" @click="emit('refresh')">返回</div>
		</div>
		<div class="home-time">{{ state.time.txt }}</div>
	</div>
</template>
<script setup lang="ts" name="home-head">
import { reactive, onMounted } from 'vue';
import { formatDate } from '/@/utils/formatTime';
// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);
const state = reactive({
	time: {
		txt: '',
		fun: 0,
	},
});

// 初始化时间
const initTime = () => {
	state.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW');
	state.time.fun = window.setInterval(() => {
		state.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW');
	}, 1000);
};

onMounted(() => {
	initTime();
});
</script>
<style lang="scss" scoped>
.home-head {
	width: 100%;
	height: 80px;
	background-image: url('../../../assets/images/home/home-head.svg');
	background-size: 100% 100%;
	display: flex;
	position: relative;

	.home-title {
		display: flex;
		align-items: center;
		height: 100%;
		margin-left: 35px;
		font-size: 38px;
		font-family: ShuHeiTi;
		font-weight: bold;
		line-height: 45px;
		letter-spacing: 5px;
		background: linear-gradient(180deg, #fbfcff 16%, #74abff 64%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.home-return {
		display: flex;
		justify-content: center;
		align-items: flex-end;
		margin-left: 200px;
		.return-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 180px;
			height: 50%;
			background-image: url('../../../assets/images/home/home-return.svg');
			background-size: 100% 100%;
			font-size: 24px;
			font-family: YouShe;
			color: #c1e1ff;
			line-height: 28px;
			letter-spacing: 2px;
			cursor: pointer;
		}
	}

	.home-time {
		position: absolute;
		right: 100px;
		bottom: -40px;
		height: 100%;
		font-size: 20px;
		font-family: D-DIN Exp-DINExp, D-DIN Exp-DINExp;
		color: #e7f1fb;
	}
}
</style>
